{% extends 'base.html' %}

{% block title %}article {% endblock %}
{% load staticfiles %}
{% block style %}
<link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}">
{% endblock %}
{% block content %}
<div class="row text-center">
    <h1>{{ article.title }}</h1>
    <p class="text-center">
        <span>{{ article.author.username }}</span>
        <span style="margin-left: 20px">{{ publish }}</span>
    </p>
<!--    <div>{{ article.body }}</div>-->
    <div id="editormd-view">
        <textarea id="append-test" style="display:none;">{{ article.body }}</textarea>
    </div>
</div>
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'editor/lib/marked.min.js' %}"></script>
<script src="{% static 'editor/lib/prettify.min.js' %}"></script>
<script src="{% static 'editor/lib/raphael.min.js' %}"></script>
<script src="{% static 'editor/lib/underscore.min.js' %}"></script>
<script src="{% static 'editor/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'editor/lib/flowchart.min.js' %}"></script>
<script src="{% static 'editor/lib/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'editor/editormd.min.js' %}"></script>
<script>
    $(function(){
        editormd.markdownToHTML('editormd-view', {
            htmlDecode: 'style, script, iframe',
            emoji: true,
            taskList: true,
            text: true,
            flowChart: true,
            sequenceDiagram: true,
        })
    })
</script>
{% endblock %}

{% block ad %}
{% load static %}
<img src="{% static './images/djbook.jpg' %}" width="400" alt="">
{% endblock %}